<template>
    <header>
        <nav>
            <h3>选项式API</h3>
        </nav>

    </header>
    <main>
        <p>{{ str }}</p>
        <p>{{ num }}</p>
        <img :src="srcs" alt="">
        <button @click="click">按钮</button>
        <p>{{ data }}</p>
        <button @click="add">求和</button>
        <p>{{ sum }}</p>
        <p>{{ test }}</p>
        <input type="text" v-model="test">
    </main>
</template>
<script lang="ts">
export default {
    name:'dayStuden',
  data() {
    const str: string = '你好世界'
    const num:number=123
    const srcs:string='@/assets/images/7.png'
    // let data:number=123
    // let sum:number=0
    const test:string='小小月'
    return {
      str,
      num,
      srcs,
      data,
      sum,
      test,
    }
  },
  methods:{
    click(){
        this.data++
    },
    // click:function
    //     this.data++
    // },
    add:function(){
        this.sum=this.data+this.num
    },
    edit:function(){
        this.str='helloworld'
    },
  },
  mounted(){
    console.log(`The initial count is ${this.num}.`)
  }
}
</script>
<style lang="scss">
#wrap{
    width: 100%;
    height: 100%;
    text-align: center;
    h1{
        color: white;
    }
}
</style>
